<template>
  <div>
    <a-form ref="form" style="max-width: 500px; margin: 40px auto 0;" :model="formState">
      <a-alert
        :closable="true"
        message="确认转账后，资金将直接打入对方账户，无法退回。"
        style="margin-bottom: 24px;"
      />
      <a-form-item
        label="付款账户"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        class="stepFormText"
      >
        ant-design@alipay.com
      </a-form-item>
      <a-form-item
        label="收款账户"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        class="stepFormText"
      >
        test@example.com
      </a-form-item>
      <a-form-item
        label="收款人姓名"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        class="stepFormText"
      >
        Alex
      </a-form-item>
      <a-form-item
        label="转账金额"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        class="stepFormText"
      >
        ￥ 5,000.00
      </a-form-item>
      <a-divider />
      <a-form-item
        label="支付密码"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        class="stepFormText"
        name="paymentPassword"
        :rules="[{required: true, message: '请输入支付密码'}]"
      >
        <a-input
          v-model:value="formState.paymentPassword"
          type="password"
          style="width: 80%;"
        />
      </a-form-item>
      <a-form-item :wrapper-col="{span: 19, offset: 5}">
        <a-button :loading="loading" type="primary" @click="nextStep">
          提交
        </a-button>
        <a-button style="margin-left: 8px" @click="prevStep">
          上一步
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
    export default {
        name: 'Step2',
        data() {
            return {
                labelCol: { lg: { span: 5 }, sm: { span: 5 }},
                wrapperCol: { lg: { span: 19 }, sm: { span: 19 }},
                formState: {},
                loading: false,
                timer: 0
            }
        },
        beforeDestroy() {
            clearTimeout(this.timer)
        },
        methods: {
            nextStep() {
                const that = this
                this.$refs.form.validate().then(() => {
                    console.log('表单 values', this.formState)
                    that.timer = setTimeout(function() {
                        that.loading = false
                        that.$emit('nextStep')
                    }, 1500)
                }).catch(err => {
                    that.loading = false
                    console.error(err)
                })
            },
            prevStep() {
                this.$emit('prevStep')
            }
        }
    }
</script>

<style lang="less" scoped>
    .stepFormText {
        margin-bottom: 24px;

        .ant-form-item-label,
        .ant-form-item-control {
            line-height: 22px;
        }
    }

</style>
